<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
	<div id="Pic">
        <img src="imgs/1.jpg" alt=""/>
        <img src="imgs/2.jpg" alt=""/>
        <img src="imgs/3.jpg" alt=""/>
        <img src="imgs/4.jpg" alt=""/>
        <img src="imgs/5.jpg" alt=""/>
        <img src="imgs/6.jpg" alt=""/>
        <img src="imgs/7.jpg" alt=""/>
        <img src="imgs/8.jpg" alt=""/>
        <img src="imgs/9.jpg" alt=""/>
        <img src="imgs/10.jpg" alt=""/>
    </div>
    <ul id="thumbs">
        <li class='active' rel='1'><img src="imgs/1_thumb.jpg" alt=""/></li>
        <li rel='2'><img src="imgs/2_thumb.jpg" alt=""/></li>
        <li rel='3'><img src="imgs/3_thumb.jpg" alt=""/></li>  
        <li rel='4'><img src="imgs/4_thumb.jpg" alt=""/></li>
        <li rel='5'><img src="imgs/5_thumb.jpg"  alt=""/></li>
        <li rel='6'><img src="imgs/6_thumb.jpg" alt=""/></li>
        <li rel='7'><img src="imgs/7_thumb.jpg" alt=""/></li>
        <li rel='8'><img src="imgs/8_thumb.jpg" alt=""/></li>
        <li rel='9'><img src="imgs/9_thumb.jpg" alt=""/></li>
        <li rel='10'><img src="imgs/10_thumb.jpg" alt=""/></li>
    </ul> 
	<script type="text/javascript">
		var currentImage;
		var currentIndex = -1;
		var interval;
		function showImage(index){
			if(index < $('#Pic img').length){
				var indexImage = $('#Pic img')[index]
				if(currentImage){ 
					if(currentImage != indexImage ){
						$(currentImage).css('z-index',1);
						clearTimeout(myTimer);
						$(currentImage).slideUp('fast', function() {
							myTimer = setTimeout("showNext()", 3000);
							$(this).css({'display':'none','z-index':0})
						}); 
					}
				}                 
				$(indexImage).css({'display':'block'});
				currentImage = indexImage;
				currentIndex = index;
				$('#thumbs li').removeClass('active');
				$($('#thumbs li')[index]).addClass('active');
			}
		} 
		function showNext(){
			var len = $('#Pic img').length;
			var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
			showImage(next);
		}
		var myTimer; 
		$(document).ready(function() {
		myTimer = setTimeout("showNext()", 3000);
		showNext(); //Tai anh dau tien
		$('#thumbs li').bind('click',function(e){
		var count = $(this).attr('rel');
		showImage(parseInt(count)-1);
		});
		});     
	</script>
</body>
</html>
